<link rel="stylesheet" href="{{__TEMPLATE__}}/css/css.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4 view">
            <div class="big" ng-click="changeActive(k)" ng-repeat="(k,v) in data" ng-if="$first">
                <img ng-src="@{{v.PicUrl}}">
                <div class="text" ng-bind="v.Title"></div>
            </div>
            <div class="small" ng-click="changeActive(k)"  ng-repeat="(k,v) in data" ng-if="!$first">
                <div class="text" ng-bind="v.Title"></div>
                <div class="img">
                    <img ng-src="@{{v.PicUrl}}">
                </div>
            </div>
            <button type="button" class="btn btn-succes" ng-click="add()">添加图文</button>
        </div>
        <div class="col-xs-8">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" ng-model="active.Title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">摘要</label>
                        <div class="col-sm-10">
                            <textarea name="" class="form-control" rows="3" ng-model="active.Description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input type="text" class="form-control" readonly="" ng-model="active.PicUrl">
                                <div class="input-group-btn">
                                    <button ng-click="upImage()" class="btn btn-default" type="button">选择图片</button>
                                </div>
                            </div>
                            <div class="input-group" style="margin-top:5px;">
                                <img ng-src="@{{active.PicUrl}}" class="img-responsive img-thumbnail" width="150">
                                <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" ng-model="active.type" value="link"> 链接
                            </label>
                            <label class="radio-inline">
                                <input type="radio" ng-model="active.type" value="con"> 内容
                            </label>
                        </div>
                    </div>
                    <div class="form-group" ng-show="active.type=='con'">
                        <label for="" class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <textarea ng-model="active.content" id="container" style="height:300px;width:100%;"></textarea>
                        </div>
                    </div>
                    <div class="form-group"  ng-show="active.type=='link'">
                        <label for="" class="col-sm-2 control-label">链接</label>
                        <div class="col-sm-10">
                            <input type="text" ng-model="active.Url" class="form-control" id="" placeholder="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="data">
<script>
    function module($scope) {
        $scope.data = [
            {
                Title: 'aa',
                Description: 'aa',
                PicUrl: '1.jpeg',
                Url: '',
                content:'',
                type:'con',
            },
            {
                Title: 'bb',
                Description: 'bb',
                PicUrl: '1.jpeg',
                Url: '',
                content:'',
                type:'con',
            }
        ];
//        设定初始值
        $scope.active=$scope.data[0];
//        单击跟换内容
        $scope.changeActive = function (k) {
            $scope.active = $scope.data[k];
        }

//        添加内容
        $scope.add = function () {
            if($scope.data.length == 5){
                alert("最多填5条数据");
                return false;
            }
            var news = {
                Title: '标题',
                Description: '摘要',
                PicUrl: '',
                Url: '',
                content:'',
                type:'con',
            };
            $scope.data.push(news);
        }

        $scope.upImage=function(){
            util.image(function (images) {
                $scope.active.PicUrl = images[0];
                $scope.$apply();
            }, [])
        }


        //图文编辑器
        util.ueditor('container', {}, function (editor) {
            editor.addListener('contentChange', function () {
                $scope.active.content = editor.getContent();
            });
            editor.addListener('ready', function () {
                if (editor && editor.getContent() != $scope.active.content) {
                    editor.setContent($scope.active.content);
                }
                $scope.$watch('active', function (item) {
                    if (editor && editor.getContent() != item.content) {
                        editor.setContent(item.content ? item.content : '');
                    }
                },true);
            });
            editor.addListener('clearRange', function () {
                $scope.active.content = editor.getContent();
                $scope.$apply();
            });
        });

    }
    function submit($scope) {
        $("[name='data']").val(angular.toJson($scope.data));
    }
</script>